<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(imageItem, i) in parseImage(list.image)" :key="i">
				<image :src="imageItem.filePath" @click="preview(index, i)" mode="widthFix"></image>
			</swiper-item>
		</swiper>


		<!-- 关注用户区域 -->
		<view class="User-follow">
			<view class="User-follow-image">
				<image :src="list.userImage" class="User-follow-image-image"></image>
				<text class="User-follow-name-text">{{list.userName}}</text>
			</view>

			<view class="dd" v-if="getNumber(list.userId)==(userId)">
			</view>
			<view class="ee" v-else>
				<button type="warn" plain="true" size="mini" class="User-follow-button" v-if="list.flag"
					@click.stop="deleteFollow(list,userId)" style="color: #ccc; border-color: #ccc;">√已关注</button>
				<button type="warn" plain="true" size="mini" class="User-follow-button" v-else
					@click.stop="addFollow(list,userId)"
					style="color: rgb(7, 193, 96); border-color: rgb(7, 193, 96);">关注</button>
			</view>

		</view>

		<!-- 标题文案区域 -->
		<view class="posts-info-box">
			<view class="posts-info-box-title">{{list.title}}</view>
			<view class="posts-info-box-Copywriting">{{list.copywriting}}</view>
			<view class="posts-info-box-data">
				<text class="posts-info-box-data-text">{{list.createDate}}</text>
				<text class="posts-info-box-data-text">{{list.address}}</text>
			</view>
		</view>
		<!-- 自定义分割线组件 -->
		<uv-divider></uv-divider>

		<!-- 总评论数 -->
		<view class="scroll-content-comment" v-if="comment.length>0">
			<text class="scroll-content-comment-text">共{{comment.length}}条评论</text>
		</view>
		<!-- 评论展示区 -->
		<view class="scroll-content-zhutou">
			<!-- 评论详细 -->
			<view class="" v-if="comment.length>0">
				<view class="scroll-content-details" v-for="(items,dex) in comment" :key="items.detailsId">


					<view class="scroll-content-details-box">
						<image :src="items.userImage" mode=" aspectFit" class="scroll-content-details-Image">
						</image>
					</view>
					<view class="scroll-content-details-information">
						<text class="scroll-content-details-top">{{items.userName}}</text>
						<text class="scroll-content-details-center">{{items.comments}}</text>
						<text class="scroll-content-details-end">{{items.recoveryTime}} {{items.address}}</text>
					</view>
					<view class="scroll-content-details-love" @click.stop="love(items,userId)">
						<uni-icons color="red" class="Love-control-left-box" type="heart-filled" size="20"
							v-if="items.flag"></uni-icons>
						<uni-icons color="#c0c0c0" class="Love-control-left-box" type="heart" size="20"
							v-else></uni-icons>
						<text class="Love-control-box-text">{{items.likeCount}}</text>
					</view>
				</view>
			</view>

			<view class="details-hide" v-else>
				暂无评论
			</view>
		</view>

		<!-- 评论框 -->
		<view class="comments-box">

			<uni-easyinput prefixIcon="chat" v-model="value" @input="input" placeholder="有话要说,快来评论"
				@iconClick="iconClick" suffixIcon="paperplane-filled" maxlength=-1 focus>
			</uni-easyinput>
			<view class="aaa" @click.stop="add()">
				<image src="../../static/动态点亮爱心.png" mode="" class="details-box-down-left" v-if="list.ifLove">
				</image>
				<image src="../../static/动态爱心.png" mode="" class="details-box-down-left" v-else></image>
				<text>{{list.likeCount>=10000?(list.likeCount/10000).toFixed(1)+'万':list.likeCount}}</text>
			</view>

			<view class="bbb" @click.stop="collect(list,userId)">
				<image src="../../static/五角星.png" mode="" class="details-box-down-center" v-if="list.ifCollect">
				</image>
				<image src="../../static/五角星空.png" mode="" class="details-box-down-center" v-else></image>
				<text>{{list.collectCount>=10000?(list.collectCount/10000).toFixed(1)+'万':list.collectCount}}</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				//当前登录的用户id
				userId: 0,
				//帖子详情信息
				list: {},
				// 评论信息
				comment: [],
				//用户输入的评论值
				value: ''
			};
		},
		onLoad(options) {
			this.userId = options.userId
			this.getGoodsDetail(options.postId, options.userId)
			this.getPostComment(options.postId, options.userId)
		},
		methods: {
			//强制转换为number数据类型
			getNumber(num){
				return parseInt(num);
			},
			//评论框输入事件
			input(e) {
				setTimeout(() => {
					this.value = e;
					console.log('输入内容：', this.value);
				}, 500)

			},
			//判断用户如果点击发送按钮就将评论发送
			async iconClick(type) {
				const _this = this
				if (type === 'suffix') {
					if (this.value.length <= 0) return uni.$ShowMsg("请输入评论！")
					console.log(this.value)
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/comment/info/add', {
						postId: _this.list.postId,
						userId: _this.userId,
						comments: _this.value
					})
					if (res.code !== 200) {
						return uni.$ShowMsg("数据异常！");
					} else {
						if (res.data <= 0) {
							return uni.$ShowMsg("评论发送失败!");
						} else {
							_this.$set(_this, "comment", _this.getPostComment(_this.list.postId, _this.list.userId));
						}
					}
				}
			},
			parseImage(imageString) {
				// Check if imageString is defined before parsing
				if (imageString) {
					// 解析 JSON 字符串，将字符串转换为数组
					const imageArray = JSON.parse(imageString);
					return imageArray || [];
				} else {
					// Return an empty array if imageString is undefined
					return [];
				}
			},
			async getGoodsDetail(postId, userId) {
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/article/postDetails', {
					postId: postId,
					userId: userId
				})
				if (res.code !== 200) {
					return uni.$ShowMsg("数据请求失败！");
				}
				this.list = res.data[0]
				console.log(this.userId,this.list.userId)
			},
			async getPostComment(postId, userId) {
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/post/comment/comments', {
					postId: postId,
					userId: userId
				})
				if (res.code !== 200) {
					return uni.$ShowMsg("数据请求失败！");
				}
				this.comment = res.data
			},
			preview(i) {
				uni.previewImage({
					current: i,
					urls: this.list.image
				})
			},
			//userId是发帖作者的id，followId是我的id（取消关注）
			deleteFollow(item, followId) {
				const _this = this
				const _item = item
				uni.showModal({
					title: '提示',
					content: '确定要取消关注吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击了确定');
							// 在这里可以执行确定按钮被点击时的操作
							_this.deleteFollows(_item, followId)

						} else if (res.cancel) {
							console.log('用户点击了取消');
							// 在这里可以执行取消按钮被点击时的操作
						}
					}
				});
			},
			async deleteFollows(item, followId) {
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/post/comment/deleteFollow', {
					userId: item.userId,
					followId: followId
				})
				if (!res.data) return uni.$ShowMsg("取消关注失败！");

				this.$set(item, 'flag', false);

			},
			//userId是发帖作者的id，followId是我的id（添加关注）
			async addFollow(item, followId) {
				const _this = this
				const _item = item
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/post/comment/addFollow', {
					userId: _item.userId,
					followId: followId
				})
				if (!res.data) return uni.$ShowMsg("关注失败,数据异常！");
				_this.$set(_item, 'flag', true);

			},
			//点赞评论或者取消点赞
			async love(item, userId) {
				const _this = this
				const _item = item
				if (item.flag) {
					//执行取消点赞的逻辑
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/post/comment/delete', {
						detailsId: _item.detailsId,
						userId: userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data) {
						// 将对应的点赞数减1
						_this.$set(_item, 'likeCount', _item.likeCount - 1);
						_this.$set(_item, 'flag', false);
					} else {
						uni.$ShowMsg("取消失败！")
					}
				} else {
					//执行点赞的逻辑
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/post/comment/add', {
						detailsId: _item.detailsId,
						userId: userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data) {
						// 将对应的点赞数减1
						_this.$set(_item, 'likeCount', _item.likeCount + 1);
						_this.$set(_item, 'flag', true);
					} else {
						uni.$ShowMsg("点赞失败！")
					}
				}
			},



			//评论区域点赞和收藏相关逻辑
			async add() {
				const _this = this;
				if (_this.list.ifLove) {
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/user/love/delete', {
						postId: _this.list.postId,
						userId: _this.userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data > 0) {
						// 将对应的点赞数减1
						_this.likeCountDelete(_this.list.postId, _this.likeCount);
					} else {
						uni.$ShowMsg("取消失败！")
					}
				} else {
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/user/love/add', {
						postId: _this.list.postId,
						userId: _this.userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data > 0) {
						//将对应的点赞数加1
						_this.likeCountAdd(_this.list.postId, _this.likeCount);
					} else {
						uni.$ShowMsg("点赞失败！")
					}
				}
			},

			//将点赞数减1
			async likeCountDelete(postId, likeCount) {
				const _this = this;
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/article/likeCountDelete', {
					postId: postId,
					likeCount: likeCount - 1
				})
				if (res.code !== 200) {
					return uni.$ShowMsg("取消失败，数据异常！");
				} else {
					this.$set(_this.list, 'ifLove', false);
					this.$set(_this.list, 'likeCount', _this.list.likeCount - 1);
				}
			},
			//将点赞数加1
			async likeCountAdd(postId, likeCount) {
				const _this = this;
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/article/likeCountAdd', {
					postId: postId,
					likeCount: likeCount + 1
				})
				if (res.code !== 200) {
					return uni.$ShowMsg("点赞失败，数据异常！");
				} else {
					this.$set(_this.list, 'ifLove', true);
					this.$set(_this.list, 'likeCount', _this.list.likeCount + 1);
				}
			},

			//收藏相关请求逻辑
			async collect(item, userId) {
				const _this = this
				const _item = item
				if (item.ifCollect) {
					//执行取消点赞的逻辑
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/user/collect/delete', {
						postId: _item.postId,
						userId: userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data) {
						// 将对应的点赞数减1
						_this.$set(_item, 'collectCount', _item.collectCount - 1);
						_this.$set(_item, 'ifCollect', false);
					} else {
						uni.$ShowMsg("取消失败！")
					}
				} else {
					//执行点赞的逻辑
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/user/collect/add', {
						postId: _item.postId,
						userId: userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data) {
						// 将对应的点赞数减1
						_this.$set(_item, 'collectCount', _item.collectCount + 1);
						_this.$set(_item, 'ifCollect', true);
					} else {
						uni.$ShowMsg("点赞失败！")
					}
				}
			}
		}
	}
</script>


<style lang="scss">
	swiper {
		height: 750rpx;

		image {
			width: 100%;
			height: auto;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.User-follow {
		display: flex;
		align-items: center;
		height: 80px;

		.User-follow-image {
			display: flex;
			width: 75%;
			align-items: center;
			height: 80px;


			.User-follow-image-image {
				margin-left: 26rpx;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				object-fit: cover;
				/* 确保图像填充容器 */
				display: block;
				/* 确保图像显示为块级元素 */

			}

			.User-follow-name-text {
				margin-left: 20rpx;
			}
		}





		.User-follow-button {}
	}

	.posts-info-box {

		.posts-info-box-title {
			font-weight: bold;
			padding: 0 14rpx;
			font-size: 36rpx;
		}

		.posts-info-box-Copywriting {
			margin-top: 20rpx;
			padding: 0 16rpx;
		}

		.posts-info-box-data {
			margin: 30rpx 0;
			padding: 0 16rpx;


			.posts-info-box-data-text {
				font-size: 28rpx;
				margin-right: 10rpx;
				color: #858585;
			}
		}
	}

	.comment {

		.comment-count {}

		.comment-info {


			.comment-info-details {


				.comment-info-details-Image {}

				.comment-info-details-box {

					.comment-info-details-name {}

					.comment-info-details-comments {}
				}
			}
		}
	}

	.scroll-content-comment {
		height: 40rpx;
		padding: 0 20rpx;

		.scroll-content-comment-text {
			color: #a2a294;
			font-size: 28rpx;
		}
	}

	.scroll-content-zhutou {
		width: 750rpx;
		margin-top: 30rpx;

		.scroll-content-details {
			width: 750rpx;
			display: flex;
			margin-bottom: 40rpx;

			.scroll-content-details-box {
				width: 13%;
				display: flex;
				align-items: flex-start;
				justify-content: center;


				.scroll-content-details-Image {
					margin-top: 20rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					display: block;
				}
			}

			.scroll-content-details-information {
				width: 77%;
				border-bottom: 1px solid #c0c0c0;

				.scroll-content-details-top {
					margin-top: 16rpx;
					margin-bottom: 10rpx;
					display: block;
					color: #c0c0c0;
					font-size: 26rpx;
				}

				.scroll-content-details-center {
					display: block;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}

				.scroll-content-details-end {
					display: block;
					font-size: 24rpx;
					color: #c0c0c0;
					margin-bottom: 36rpx;
				}
			}

			.scroll-content-details-love {
				border-bottom: 1px solid #c0c0c0;
				width: 10%;
				display: flex;
				flex-direction: column;
				align-items: center;


				.Love-control-left-box {
					margin-top: 20rpx;
				}

				.Love-control-box-text {
					margin-top: 10rpx;
					font-size: 20rpx;
					color: #c0c0c0;
				}
			}
		}

		.details-hide {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 50rpx;
			width: 100%;
			height: 300rpx;
			color: #c0c0c0;
		}
	}

	.comments-box {
		width: 750rpx;
		display: flex;
		background-color: #fff;
		position: sticky;
		bottom: 0;


		.aaa {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 10rpx;

			.details-box-down-left {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}

		}

		.bbb {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 10rpx;


			.details-box-down-center {
				width: 40rpx;
				height: 40rpx;
				margin: 0 10rpx;
			}
		}
	}
</style>